/**
 * 
 */
Ext.onReady(function () {
	
	Ext.QuickTips.init();
	
	var loginPanel = new Ext.Panel({
		title: "用户登录",
		height: 350,
		width: 600,
		frame: true,
		style: "margin: 50px auto;",
		items: [
			{
				xtype: "panel",
				autoWidth: true,
				height: 110,
				frame: true,
				contentEl: "formLogo"
			},
			{
				xtype: "panel",
				autoWidth: true,
				height: 200,
				frame: true,
				style: "margin-top: 5px;",
				items: [
					new Ext.LoginForm()
				]
			}
		],
		renderTo:Ext.getBody()
	});
});

// login 登录用户名和密码页面
Ext.LoginForm = Ext.extend(Ext.form.FormPanel ,{
	xtype: "form",
	labelWidth: 100,
	labelAlign: "left",
	layout: "form",
	width: 300,
	height: 200,
	padding: "10px",
	style: "margin: 0px auto;",
	initComponent: function(){
		
		var thisForm = this;
		
		this.items = [
			{
				xtype: "textfield",
				fieldLabel: "用户账号",
				name: "userName",
				cls: 'userName',
				allowBlank: false,
				blankText: '请输入用户账号!',
				maxLength: 18,
				anchor: "100%"
			},
			{
				xtype: "textfield",
				fieldLabel: "用户密码",
				inputType: 'password',
				name: "userPass",
				cls: 'userPass',
				allowBlank: false,
				blankText: '请输入用户密码!',
				maxLength: 18,
				anchor: "100%"
			},
			{
				xtype: "panel",
				autoWidth: true,
				layout: "table",
				height: 25,
				items: [
					{
						xtype: "label",
						text: "验   证   码:",
						style: "margin-left: 6px;",
						width: 100
					},
					{
						xtype: "numberfield",
						name: "randNumber",
						allowBlank: false,			// 是否允许为空
						blankText: '请输入验证码!',
						allowDecimals: false,   	// 是否与许小数 
						nanText: '验证码不正确!',
				        allowNegative: false,   	// 是否允许负数 
				        minValue: 1000,
				        minText: '验证码不正确!',
						style: "margin-left: 53px; color: red;",
						width: 45,
						maxLength: 4, 
						maxLengthText: "验证码只能输入[4]位!"
					},
					{
						xtype: "panel",
						width: 60,
						height: 25,
						contentEl: "randNum",
						style: "margin-left: 5px;"
					},
					{
						xtype: "button",
						text: "换一张",
						style: "margin-left: 5px;",
						handler: function () {
							
							// 删除验证码图片
							Ext.getDom("randNum").removeChild(Ext.getDom("randNumImg"));
							
							// 创建验证码图片
							var img = document.createElement("img");
							img.id = "randNumImg",
							img.src = url + "image.jsp?date=" + new Date();
							
							// 把图片加入 randNum 中
							Ext.getDom("randNum").appendChild(img);
						}
					}
				]
			},
			{
				xtype: "panel",
				autoWdith: true,
				layout: "table",
				style: "text-align: center; margin-top: 10px;",
				items: [
					{
						xtype: "button",
						text:"登录",
						cls: "x-btn-text-icon",
						icon: "images/icons/lock_open.png",
						minWidth: 70,
						style: "margin-left: 60px;",
						handler: function () {
							
							if (thisForm.getForm().isValid()) {
								
								thisForm.getForm().submit({
							 		waitMsg : '正在登录......',
							   		url : url + "LoginServlet",
							   		success : function(form, action) {
						    			
							   			window.location.href = url + "app/MainServlet";
							   		},
						   			failure: function(re, v) {
						   				
						   				var msgs = Ext.util.JSON.decode(v.response.responseText);
								   	
						   				Ext.MessageBox.alert("信息提示框", msgs.msg);
								   }
								});
							}
						}
					},
						{
						xtype: "button",
						text: "重置",
						cls: "x-btn-text-icon",
						icon: "images/icons/arrow_redo.png",
						minWidth: 70,
						style: "margin-left: 50px;",
						handler : function () {
							
							// 重置资料
							thisForm.getForm().reset();
						}
					}
				]
			}
		];
		
		Ext.LoginForm.superclass.initComponent.call(this);
	}
});